@charset "utf-8";
/* CSS Document */

body,figure,figcaption,h2,p,img{margin:0;padding:0;}

figure{position:relative;width:33.33%;overflow:hidden;height:350px;float:left;}
figure img{opacity:0.8;transition:all 0.35s;}
figure figcaption p,h2,span,div{transition:all 0.35s;}
figcaption{position:absolute;top:0px;left:0px;color:#FFF;font-family:"微软雅黑"}

@media screen and (max-width:600px){
	figure{width:100%;}
}
@media screen and(min-width:601px) and (max-width:1000px){
	figure{width:50%;}
}
@media screen and (min-width:1001px){
	figure{width:33.33%;}
}

.test1{background:#2F0000;}
.test1 figcaption p{margin:5px;text-align:center;transform:translate(-120px,0px);}
.test1 figcaption p:nth-of-type(1){transition-delay:0.05s;}
.test1 figcaption p:nth-of-type(2){transition-delay:0.1s;}
.test1 figcaption p:nth-of-type(3){transition-delay:0.15s;}
.test1 figcaption{padding:20px;}
.test1:hover figcaption p{transform:translate(0px,0px);}
.test1:hover img{transform:translate(-50px,0px);opacity:0.5;}

.test2{background:#C33;}
.test2 figcaption{width:100%;height:100%;}
.test2 figcaption h2{margin-top:15%;margin-left:15%;}
.test2 figcaption p{margin-left:15%;transform:translate(-250px,0px);}
.test2 figcaption div{border:2px solid #FFF; width:80%;height:80%;position:absolute;top:10%;left:10%;transform:translate(0px,-350px) rotate(0deg);}
.test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg);}
.test2:hover img{opacity:0.5;}
.test2:hover figcaption p{transform:translate(0px,0px);opacity:1}

.test3{background:#63F;}
.test3 figcaption{top:30%;left:15%;}
.test3 figcaption h2{transform:skew(90deg);}
.test3 figcaption p{transform:skew(90deg); transition-delay:0.15s;}
.test3:hover img{opacity:0.5;}
.test3:hover figcaption h2{transform:skew(0deg);}
.test3:hover figcaption p{transform:skew(0deg);}

.test4{background:#06F;}
.test4 figcaption h2{margin-top:15%;margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test4 figcaption p{margin-top:5px;margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test4 figcaption{width:100%;height:100%;}
.test4 figcaption div{border:2px solid #FFF;width:80%;height:80%;position:absolute;top:10%; left:10%; transform:scale(1.2,1.2);opacity:0;}
.test4:hover figcaption div{transform:scale(1.1);opacity:1;}
.test4:hover img{opacity:0.5; transform:scale(1.2,1.2);}
.test4:hover figcaption h2{transform:scale(1.1); opacity:1;}
.test4:hover figcaption p{transform:scale(1.1); opacity:1;}

.test5{background:#FF6;}
.test5 figcaption h2{margin-top:15%; margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test5 figcaption p{margin-top:5px; margin-left:15%;transform:scale(1.2,1.2);opacity:0;}
.test5 figcaption{width:100%; height:100%;}
.test5 figcaption div.div1{border-top:2px solid #FFF; border-bottom:2px solid #FFF;width:90%; height:80%; position:absolute; top:10%; left:5%; transform:scale(0.1,1.1); opacity:0;}
.test5 figcaption div.div2{border-right:2px solid #FFF; border-left:2px solid #FFF; width:80%; height:90%; position:absolute; top:5%; left:10%; transform:scale(1.1,0.1); opacity:0;}
.test5:hover figcaption div.div1{transform:scale(1.1); opacity:1;}
.test5:hover figcaption div.div2{transform:scale(1.1); opacity:1;}
.test5:hover img{opacity:0.5;}
.test5:hover figcaption h2{transform:scale(1.1); opacity:1;}
.test5:hover figcaption p{transform:scale(1.1); opacity:1;}

.test6{background:#F96;}
.test6 figcaption p.p1{color:#000; margin-top:80%; margin-left:75%;}
.test6 figcaption p.p2{color:#000; margin-top:2%; margin-left:75%;}
.test6 figcaption{width:100%; height:100%;}
.test6 figcaption div{background:#069; width:130%;height:100%;position:absolute;transform:translate(0,20px) rotate(0deg); transform-origin:0 0; opacity:0.5;}
.test6:hover img{opacity:0.5; transform:translate(0,-10px);}
.test6:hover figcaption p.p1{margin-top:60%; margin-left:75%; opacity:1;  transition-delay:0.2s;}
.test6:hover figcaption p.p2{margin-top:2%; margin-left:75%; opacity:1;  transition-delay:0.3s;}
.test6 figcaption h2{margin-top:10%; margin-left:10%; transform:translate(0,20px); opacity:0;}
.test6:hover figcaption h2{transform:translate(0,0); opacity:1; transition-delay:0.2s;}
.test6:hover figcaption div{transform:translate(0,15px) rotate(-15deg); opacity:0.9;}



.test7{ background:#000;}
.test7 figcaption{ width:100%; height:100%;}
.test7 figcaption div{ background: #fff; width:130%; height:100%; position:absolute; transform:translate(0,100px) rotate(0deg); transform-origin:0 0; opacity:0.5;}
.test7:hover figcaption div{transform:translate(0,63px) rotate(-15deg); opacity:0.9;}
.test7:hover img{opacity:0.5;transform:translate(0,-10px);}
.test7 figcaption h2{margin:15% 0 0 10%; transform:translate(0,50px); opacity:0;}
.test7 figcaption p{ margin:50% 0 0 80%; transform:translate(0,50px); opacity:0; color:#000;}
.test7:hover figcaption h2{ transform:translate(0,0); opacity:1; transition-delay:0.2s;}
.test7:hover figcaption p{ transform:translate(0,0); opacity:1; transition-delay:0.3s;}









